import { Home } from '@/model/home/Home';
import { LiveType } from '@/model/home/types';
import { Live } from '@/model/live/Live';
import { Login } from '@/model/login/Login';
import { Room } from '@/model/room/Room';
import { Socket } from '@/model/socket/Socket';
import { useInjectable } from '@/unit/hooks/use-di';
import { info, warning } from '@/unit/message';
import { NavigateTo } from '@/unit/navigate-to';
import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useState } from 'react';
import View from './home.view';

export default observer(() => {
  const socket = useInjectable(Socket);
  const home = useInjectable(Home);
  const live = useInjectable(Live);
  const login = useInjectable(Login);

  const [visible, setVisible] = useState(false);

  useEffect(() => {
    home.getList();
  }, [home]);

  const handleItem = useCallback(
    (value: LiveType) => {
      live.setLive(value);
      setVisible(true);
    },
    [live]
  );

  const handleRtc = useCallback(() => {
    warning('rtc形式正在施工中');
  }, []);

  const handleSocket = useCallback(() => {
    if (!live.live.id) {
      warning('请刷新重试');
      return;
    }
    setVisible(false);
    NavigateTo('live', {
      roomid: live.live.id,
      isAdmin: String(
        live.live.userId === login.userInfo.id
      ),
    });
  }, [live.live.id, live.live.userId, login.userInfo.id]);

  return (
    <View
      title={live.live.title}
      clickSocket={handleSocket}
      clickRtc={handleRtc}
      visible={visible}
      setVisible={setVisible}
      list={home.List}
      handleItem={handleItem}
    />
  );
});
